<template>
    <div class="login-page">
        <el-card class="box-card">
            <p class="title">
                <strong>电子合同签署平台</strong>
            </p>
            <el-form
                :model="ruleForm"
                status-icon
                ref="ruleForm"
                class="login-forward-info"
            >
                <el-form-item>
                    <div class="label-title">账号</div>
                    <el-input
                        type="text"
                        @focus="toggleLabel($event, true)"
                        @blur="toggleLabel($event, false)"
                        placeholder="账号"
                        v-model="ruleForm.username"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <div class="label-title">密码</div>
                    <el-input
                        @focus="toggleLabel($event, true)"
                        @blur="toggleLabel($event, false)"
                        type="password"
                        placeholder="密码"
                        v-model="ruleForm.password"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <div class="change-login-method">
                    <el-button
                        type="text"
                        class="set-login-btn"
                        @click="submitForm"
                        >忘记密码？使用验证码登录</el-button
                    >
                </div>
            </el-form>
            <el-button type="primary" class="login-btn" @click="submitForm"
                >登录</el-button
            >
        </el-card>
    </div>
</template>

<script>
import { userModule } from '@/store/modules/user'
import { menuModule } from '@/store/modules/menu'

export default {
    name: 'login-page',
    data() {
        return {
            /** 用户登录信息 */
            ruleForm: {
                username: '10000000001',
                password:
                    '{cipher}LD++IcnSvvaFs5VKk/V81ygVr0ZShjQj4sh2EIJGAm/UKtTGX3Qvq1VATUPFbEpkGBUlN4uDiwX6g0S/QUHm3UokI/qGugJM7wtMWsSDcZTKONpR6RAyKF+pmEF1Z6xazxUjsC34qzAmdVj6tPxBRDhZSaFtVXqWCbOvlLnNvMU='
            }
        }
    },
    methods: {
        /** 点击发送登录请求 */
        submitForm() {
            userModule.Login(this.ruleForm).then(() => {
                // 添加跳转到维护homeMenu的操作
                if (menuModule.homeMenuIndex) {
                    this.$router.push({ path: `/${menuModule.homeMenuIndex}` })
                } else {
                    this.$router.push({ path: '/' })
                }
            })
        },

        /** 输入提示的label显示/隐藏 */
        toggleLabel(e, flag) {
            const el = e.target.parentNode.previousSibling
            el.style.visibility = flag ? 'visible' : 'hidden'
        }
    }
}
</script>

<style lang="less" scoped>
/* 登录form位置 */
.login-page {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/** Element card */
/deep/ .el-card {
    width: 458px;
    padding: 24px 40px;
    position: relative;
    .el-card__body {
        padding: 24px;
        .title {
            font-size: 24px;
            color: #001330;
            text-align: center;
            margin: 20px auto 32px;
            font-weight: 700;
            & > strong {
                font-weight: 700;
            }
        }
    }
}

/** Element form */
/deep/ .login-forward-info {
    padding-top: 16px;
    margin-bottom: 52px;
    .el-form-item {
        margin-bottom: 30px;
        .el-form-item__content {
            & input {
                border-top: 0;
                border-left: 0;
                border-right: 0;
                border-radius: 0;
            }
            /* 输入框唤醒动画 */
            .el-input__inner {
                transition: border-color 0.2s
                    cubic-bezier(0.645, 0.045, 0.355, 1);
            }
        }
    }
}

/* label 提示 */
.label-title {
    visibility: hidden;
    position: absolute;
    bottom: 25px;
    line-height: 30px;
    z-index: 1;
    color: #7f8997;
    font-size: 12px;
}

/* 切换按钮 */
.change-login-method {
    position: relative;
}
.set-login-btn {
    position: absolute;
    top: -25px;
    right: -1px;
    color: #7f8997;
    font-size: 11px;
}
/* 登录按钮 */
.login-btn {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 12px;
}
</style>
